<script setup>
import {ElMessage} from 'element-plus'
import { ref } from 'vue'
const user = ref({
  name: '',
  salary: '',
  job: '',
})
const add= (type) => {
  if(!user.value.name||!user.value.name.trim()||!user.value.salary||!user.value.salary.trim()||!user.value.job||!user.value.job.trim()){
    alert('请输入员工信息');
    return;
  }
  switch (type){
    case 1: ElMessage.success('提交成功');break;
    case 0: ElMessage.error('提交失败');
  }
  users.value.push(user.value);
  user.value= {
    name: '',
    salary: '',
    job: ''
  }
}

const users = ref([])

const del = (index,row)=>{
  if(confirm('确定删除'+row.name+'吗？')){
    users.value.splice(index, 1);
    alert('删除成功');
  }
}
</script>

<template>
<h1>员工列表综合练习</h1>
    <el-form style="width: 500px;margin: 0 auto;" label-width="80">
      <el-form-item label="姓名">
        <el-input  placeholder="请输入员工姓名" v-model="user.name"></el-input>
      </el-form-item>
      <el-form-item label="工资">
        <el-input placeholder="请输入员工工资" v-model="user.salary"></el-input>
      </el-form-item>
      <el-form-item label="岗位">
        <el-input placeholder="请输入员工岗位" v-model="user.job"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="add(1)" type="success">提交</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="users" style="width: 500px;margin: 0 auto;">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="salary" label="工资" align="center"></el-table-column>
      <el-table-column prop="job" label="岗位" align="center"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="del(scope.$index,scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<style scoped>

</style>